<template>
  <div class="app-container">
    <div class="buttons" style="margin-bottom: 16px">
      <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
      <!--      <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>-->
    </div>
    <q-table @register="registerTable" :default-expand-all="true">
      <template #operation="{ rowData }">
        <el-button type="primary" size="small" @click="onEdit(rowData)">编辑</el-button>
        <el-button type="danger" size="small" @click="onDelete(rowData)">删除</el-button>
      </template>
    </q-table>
    <q-drawer @register="registerDrawer" @ok="onDrawerOk" @cancel="closeDrawer">
      <q-form @register="registerForm" />
    </q-drawer>
  </div>
</template>

<script setup>
import QTable from '@/components/Q/QTable/QTable.vue'
import useTable from '@/components/Q/QTable/hooks/useTable.js'
import QForm from '@/components/Q/QForm/QForm.vue'
import useForm from '@/components/Q/QForm/hooks/useForm.js'
import QDrawer from '@/components/Q/QDrawer/QDrawer.vue'
import useDrawer from '@/components/Q/QDrawer/hooks/useDrawer.js'
import { ElMessage } from 'element-plus'
import { download } from '@/utils/request.js'
import categoryApi from '@/api/base/category/category.js'

const [registerTable, { reload }] = useTable({
  rowKey: 'categoryId',
  showPagination: false,
  columns: [
    { label: '商品分类', prop: 'categoryName' },
    { label: '创建时间', prop: 'createTime' },
    {
      label: '操作',
      prop: 'operation',
      slotName: 'operation'
    }
  ],
  listApi: categoryApi.getList
})

const [registerDrawer, { openDrawer, closeDrawer, setOkButtonLoading, setLoading }] = useDrawer()

const [registerForm, { validate, getForm, setForm }] = useForm({
  config: [
    {
      col: 4,
      label: '上级分类',
      prop: 'parentId',
      type: 'select-tree',
      api: categoryApi.getList.bind(null, { addRoot: true }),
      componentProps: {
        props: {
          label: 'categoryName',
          value: 'categoryId'
        },
        highlightCurrent: true,
        defaultExpandAll: true,
        checkStrictly: true
      },
      rules: [{ required: true, message: '请选择上级分类', trigger: 'change' }]
    },
    { col: 4, label: '分类名称', prop: 'categoryName', type: 'text' },
    { col: 4, label: '备注', prop: 'remark', type: 'text' }
  ]
})

const onDelete = async rowData => {
  try {
    const res = await categoryApi.delete(JSON.stringify([rowData.categoryId]))
    ElMessage.success(res.msg)
    reload()
  } catch (e) {
    ElMessage.success('操作失败')
  }
}

const onEdit = async rowData => {
  openDrawer({ title: '编辑商品' })
  setLoading(true)
  const res = await categoryApi.getInfo(rowData.categoryId)
  setForm(res.data)
  setLoading(false)
}

const onAdd = () => {
  openDrawer({ title: '新增分类' })
}

const handleExport = () => {
  download('/erp/color/export', {}, `color_${new Date().getTime()}.xlsx`)
}

const onDrawerOk = async () => {
  const valid = await validate()
  if (valid) {
    try {
      setOkButtonLoading(true)
      const formData = getForm()
      let res
      if (formData.categoryId > 0) {
        res = await categoryApi.update(formData)
      } else {
        res = await categoryApi.add(formData)
      }
      ElMessage.success(res.msg)
      closeDrawer()
      reload()
    } catch (e) {
      ElMessage.success('操作失败')
    } finally {
      setOkButtonLoading(false)
    }
  }
}
</script>

<style scoped lang="scss"></style>
